<template>
  <section class="discover-nav">
    <div class="discover-nav-header">
      <h2 class="discover-nav-title">
        <slot></slot>
      </h2>
    </div>
    <swiper :options="swiperOption" ref="mySwiper" class="discover-list">
      <swiper-slide class="discover-item" v-for="(item, index) in discoverItems" :key="item.name">
        <a :href="item.link" :style="{ 'border-color': colorArr[index % 4], 'color': colorArr[index % 4]  }">{{
          item.name }}</a>
      </swiper-slide>
    </swiper>
  </section>
</template>

<style lang="scss" scoped>
  .discover-nav-header {
    padding: 15px 18px;
  }

  .discover-nav-title {
    font-size: 18px;
    font-weight: normal;
    margin: 0;
  }

  .discover-list {
    padding: 0 18px;

    .discover-item {
      width: fit-content;
      margin-right: 10px;
      margin-bottom: 10px;

      a {
        text-decoration: none;
        font-size: 16px;
        color: #2384E8;
        display: inline-block;
        padding: 15px 20px;
        border: solid 1px #2384E8;
        border-radius: 5px;
      }
    }
  }

</style>

<script>
  import 'swiper/dist/css/swiper.css';
  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper';

  export default {
    components: {
      swiper,
      swiperSlide
    },
    data() {
      return {
        swiperOption: {
          slidesPerView: 'auto',
          slidesPerColumn: 2,
        },
        colorArr: ['#3BA94D', '#CC3344', '#2384E8', '#FFC46C'],
        discoverItems: [{
            name: '同时入选IMDB250和豆瓣250的电影',
            link: 'https://m.douban.com/doulist/968362/'
          },
          {
            name: '带你进入不正常的世界',
            link: 'https://m.douban.com/doulist/16002/'
          },
          {
            name: '用电【影】来祭奠逝去的岁月',
            link: 'https://m.douban.com/doulist/190343/'
          },
          {
            name: '科幻是未来的钥匙——科幻启示录【科幻题材】',
            link: 'https://m.douban.com/doulist/4253902/'
          },
          {
            name: '女孩们的故事【电影】',
            link: 'https://m.douban.com/doulist/1125971/'
          },
          {
            name: '使用【App找电影功能】',
            link: 'https://www.douban.com/doubanapp/dispatch?from=mdouban&download=1&model=B&copy=1&page=movie&channel=card_find_movie&uri=%2Fmovie%2Ftag'
          },
          {
            name: '美国生活面面观',
            link: 'https://m.douban.com/doulist/121326/'
          },
          {
            name: '2015终极期待',
            link: 'https://m.douban.com/doulist/37479562/'
          },
          {
            name: '经典韩国电影——收集100部',
            link: 'https://m.douban.com/doulist/458087/'
          }
        ]
      }
    }
  }

</script>
